<script setup>
import { ref, computed } from 'vue'

const firstName = ref('张')
const secondName = ref('三')

// const fullName = firstName + secondName

// 计算属性，有缓存
// const fullName = computed(()=>{
//     console.log("计算属性执行了....");

//     return firstName.value + secondName.value
// })

const fullName = computed({
    get: () => {
        console.log("计算属性执行了....");
        return firstName.value + secondName.value
    },
    set(newValue) {
        firstName.value = newValue.substring(0, 1)
        secondName.value = newValue.substring(1)
    }
})

// 每次数据变化都会重新计算
const fullNameFunc = () => {
    console.log("方法执行了....");

    return firstName.value + secondName.value
}


// 延迟执行
setTimeout(() => {
    // secondName.value = "三丰"
    fullName.value = "张三丰123"
}, 3000)
// 定时器
const count = ref(0)
let intervalId = setInterval(() => {
    count.value++
    if (count.value == 10) {
        clearInterval(intervalId)
    }
}, 1000)
</script>

<template>
    <div>{{ count }}</div>
    <div>
        姓：{{ firstName }}
    </div>

    <div>
        名：{{ secondName }}
    </div>

    <div>
        <!-- 完整：{{ firstName + secondName }} -->
        完整：{{ fullName }}
    </div>

    <div>
        方法:{{ fullNameFunc() }}
    </div>
</template>